<template>
	<view>
		<u-navbar
			title="手机号登录"
			leftText="返回"
			bgColor="#ffffff"
			@leftClick="rightClick"
			:autoBack="false"
		>
		</u-navbar>
		
		<view class="content">
			<view class="title">Welcome Login!</view>
			
			<view class="loginForm" style="padding-top: 40px;">
				<u-form
					labelPosition="left"
					:model="userInfo"
					:rules="rules"
					ref="uForm"
				>
					<u-form-item
							prop="phone"
							:borderBottom="false"
							ref="item1"
					>
						<u-input
								v-model="userInfo.phone"
								placeholder="请输入电话号码"
						></u-input>
					</u-form-item>
					<u-form-item
							prop="code"
							:borderBottom="false"
							ref="item2"
					>
						<u-input
								v-model="userInfo.code"
								placeholder="请输入验证码"
								style="width: 70%;"
						></u-input>
						<u-button style="width: 40%;" class="codeBut" :disabled="isClick" @tap="getCode">{{tips}}</u-button>
					</u-form-item>
				</u-form>
				
				<view class="treaty" style="margin-top: 8px;">
				    <u-checkbox-group placement="row" @change="boxcheck" v-model="treaty">
				       <u-checkbox activeColor="blue" 
				            shape="circle" style="height: 20px;">
				       </u-checkbox>同意<view style="color: blue;" @click="show = true">《志愿者平台隐私协议》</view>
				    </u-checkbox-group>
				</view>
				
				<view style="margin-top: 40px;">
					<u-button text="登录" type="primary" @click="login"></u-button>
				</view>
			</view>
			
			<u-popup :show="show" @close="close" @open="open" :closeable="true">
				<view style="padding: 10px;height: 500px;">
					<h3 style="text-align: center;margin-top: 15px;">志愿者平台隐私协议</h3>
					<text style="margin-top: 20px;font-size: 17px;display: block;text-indent: 65rpx;">请遵守志愿者平台隐私协议，禁止违法行为，好好学习，天天向上，</text>
				</view>
			</u-popup>
			
		</view>
	</view>
</template>

<script>
import { phoneLogin, phoneLoginApi } from '../../utils/user'
	export default {
		data() {
			return {
				userInfo: {
					phone: '',
					code: '',
				},
				treaty:[],
				show: false,
				tips:'获取验证码',
				isClick: false,
				rules: {
					'phone': {
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					'code': {
						type: 'string',
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		methods: {
			rightClick(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			getCode(){
				if(this.userInfo.phone == ''){
					uni.$u.toast('请输入手机号');
				}else{
					uni.$u.toast('正在获取验证码');
					let phone = this.userInfo.phone
					phoneLoginApi(phone).then(res=> {
						if(res.code == 200){
							uni.$u.toast('验证码已发送');
						}else{
							console.log(res)
						}
					})
					
					var that = this
					that.isClick = true
								
					var time = 10
					var timer = setInterval(function(){
						if(time == 0){
							clearInterval(timer)
							that.isClick = false
							that.tips = '重新获取'
							time = 10
						}else{
							that.tips = '剩余' + time + '秒'
							time--
						}
					},1000)
				}
			},
			boxcheck(){
				
			},
			open() {
			  // console.log('open');
			},
			close() {
			  this.show = false
			  // console.log('close');
			},
			login(){
				if (this.treaty.length == 0) {
					uni.$u.toast('请勾选《志愿者平台协议》！')
				} else {
					let phone = this.userInfo.phone
					let code = this.userInfo.code
					phoneLogin(phone,code).then(res=> {
						if(res.code == 0){
							uni.showToast({
								title:'登录成功',
								duration:2000,
								icon:'success'
							})
							console.log(res)
							let myInfo = {
								id: res.data.id,
								userName: res.data.userName,
								phone: res.data.phone,
								userAccount: res.data.userAccount,
								userAvatar: res.data.userAvatar
							}
							this.$store.commit('setId',myInfo.id)
							this.$store.commit('setPhone',myInfo.phone)
							this.$store.commit('setUserAccount',myInfo.userAccount)
							this.$store.commit('setUserAvatar',myInfo.userAvatar)
							this.$store.commit('setUserName',myInfo.userName)
							this.$store.commit('setLogin',myInfo)
							uni.$u.sleep(1000).then(() => {
								uni.reLaunch({
									url:'/pages/view/homepage/homepage'
								})
							})
							
						}else{
							uni.showToast({
								title:'账号或密码错误',
								duration:2000,
								icon:'error'
							})
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
.content {
		padding: 15px 40px;
	}
	.title{
		font-weight: 700;
		font-size: 50rpx;
		margin-top: 100px;
		text-align: center;
	}
	.pointName{
		font-size: 17px;
	}
</style>
